<template>
	<view class="good_det">
		<view class="home_list" :class="{'swipe_up': swipeUp}">
			<view class="home_list_within">
				<view class="home_img">
					<u-swiper :list="demoList" :autoplay="false" :radius="0" :indicator="true" :circular="true"
						@change="swiperChange" height="272" bgColor="#ffffff">
						<view slot="indicator" class="indicator">
							<view class="indicator__dot" v-for="(item, index) in navList" :key="index"
								:class="[index === current && 'indicator__dot--active']">
								{{item.title}}
							</view>
						</view>
					</u-swiper>
					<view class="more">右滑查看更多>></view>
				</view>
				<view class="home_text">
					<h2>{{ jsonData.title }}</h2>
					<view class="price">
						<view class="pp1" v-if="jsonData.price">
							<view class="p1"><text>{{jsonData.price}}</text></view>
							<view class="p2">参考价格</view>
						</view>
						<view class="pp1">
							<view class="p1">{{jsonData.area}}㎡</view>
							<view class="p2">参考面积</view>
						</view>
					</view>
					<view class="list">
						<view class="li" @click="makeMaps()">
							<view class="title">楼盘地址：</view>
							<view class="desc">{{jsonData.address}}</view>
							<u-icon class="icon" name="arrow-right" color="#333333" size="14"></u-icon>
						</view>
						<view class="li" v-if="jsonData.types">
							<view class="title">楼盘类型：</view>
							<view class="desc">{{jsonData.types}}</view>
						</view>
						<view class="li">
							<view class="title">楼盘热线：</view>
							<view class="desc">{{jsonData.mobile}}</view>
						</view>
					</view>
					<view class="tags">
						<span v-for="(item,idx) in jsonData.tags" :key="idx">{{item}}</span>
					</view>
				</view>
				<view class="home_title">项目信息</view>
				<view class="content">
					<u-parse :content="jsonData.content"></u-parse>
				</view>
				<view class="home_text">
					<h2>项目户型图</h2>
					<view class="house">
						<u-swiper :interval="2000" :list="jsonData.house" indicatorInactiveColor="#c6c6c6"
							indicatorActiveColor="#4d4d4d" :indicator="true" circular :autoplay="true" bgColor="#ffffff"
							:height="swiperHeight">
							<!-- 自定义轮播项，使用slot -->
							<template #item="{ item }">
								<view class="swiper-item">
									<img :src="item.url" class="swiper-img" @load="onImageLoad">
								</view>
							</template>
						</u-swiper>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 62px;width: 100%;"></view>
		<view class="last_footer">
			<view class="share-btn">
				<button open-type="share" plain="true"
					style="background-color: transparent;border: none;padding: 0;background: none;line-height: 20px;border-radius: 0;">
					<u-icon name="share" color="#000000" size="24"></u-icon>
					<text>分享</text>
				</button>
			</view>
			<view @click="makeMaps()" class="share-btn">
				<u-icon name="map" color="#000000" size="24"></u-icon>
				<text>导航</text>
			</view>
			<view @click="makePhone()" class="share-btn">
				<u-icon name="phone" color="#000000" size="24"></u-icon>
				<text>电话</text>
			</view>
		</view>
		<!-- 开始效果 -->
		<view v-if="thumb" class="thumb-container" @touchstart="touchStart" @touchend="touchEnd"
			:class="{'swipe_up': swipeUp}">
			<image :src="thumb" class="thumb" mode="widthFix"></image>
			<text class="thumb_tips">上滑动查看详情</text>
			<view class="thumb_info">
				<h2>{{ jsonData.title }}</h2>
				<view class="p1"><text>{{jsonData.price}}</text></view>
				<view class="tags">
					<view class="red_tag">在售</view>
					<span v-for="(item,idx) in jsonData.tags" :key="idx">{{item}}</span>
				</view>
				<view class="desc">{{jsonData.address}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				navList: [],
				demoList: [],
				jsonData: [],
				// 地图数据
				id: 0, // 使用 marker点击事件 需要填写id
				swiperHeight: "auto",
				title: 'map',
				current: 0,
				latitude: 39.909,
				longitude: 116.39742,
				imgNum: 0,
				photo1Num: 0,
				photo2Num: 0,
				photo3Num: 0,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
				}],
				thumb: '', // 详情第一张效果图
				swipeUp: false,
				touchStartX: 0,
				touchStartY: 0
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.getIndex();
		},
		methods: {

			swiperChange(e) {
				console.log(e.current);
				//this.current = e.current;
				if (e.current == 0) {
					this.current = 0;
				} else if (this.imgNum > 0 && e.current <= this.imgNum) {
					this.current = 1;
				} else if (this.photo1Num > 0 && e.current <= (this.imgNum + this.photo1Num)) {
					this.current = 2;
				} else if (this.photo2Num > 0 && e.current <= (this.imgNum + this.photo1Num + this.photo2Num)) {
					this.current = 3;
				} else if (this.photo3Num > 0 && e.current <= (this.imgNum + this.photo1Num + this.photo2Num + this
						.photo3Num)) {
					this.current = 4;
				}
			},

			makePhone() {
				// let configSite = uni.getStorageSync('configSite');
				// uni.makePhoneCall({
				// 	phoneNumber: this.jsonData.mobile
				// });
				uni.navigateTo({
					url: '/pages/good/good_list?id=' + this.id
				})
			},

			makeMaps() {
				console.log(this.jsonData);
				console.log(this.jsonData.lat);
				console.log(this.jsonData.lng);
				uni.openLocation({
					latitude: parseFloat(this.jsonData.lat),
					longitude: parseFloat(this.jsonData.lng),
					success: function() {
						console.log('success');
					},
					fail(res) {
						console.log(res);
					}
				});
			},

			// 转发到聊天界面的配置
			onShareAppMessage(res) {
				// res.from 可判断转发触发来源：button（按钮触发）、menu（右上角菜单触发）
				let title = this.jsonData.title;
				let path = '/pages/good/good_det?id=' + this.id; // 转发后打开的页面路径（可带参数）
				return {
					title: title,
					path: path,
					// 转发成功的回调
					success(res) {
						console.log('转发成功', res);
					},
					// 转发失败的回调
					fail(res) {
						console.log('转发失败', res);
					}
				};
			},

			shareWxr() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},

			onImageLoad() {
				console.log("1111111")
				uni.getImageInfo({
					src: this.jsonData.house[0],
					success: (res) => {
						const {
							width,
							height
						} = res
						const screenWidth = uni.getSystemInfoSync().windowWidth
						// 计算适配屏幕宽度的高度
						this.swiperHeight = (screenWidth / width) * height;
						console.log(this.swiperHeight);
					}
				})
			},

			getIndex() {
				uni.$u.http.post("/house/detail", {
					id: this.id
				}).then((res) => {
					if (res.code == 200) {
						this.jsonData = res.data;
						this.thumb = res.data.thumb
						if (!this.thumb) {
							this.swipeUp = true
						}
						if (this.demoList.length == 0) {
							if (res.data.video) {
								let video = [{
									'title': "楼盘视频",
									'url': res.data.video,
									//'poster': "https://tjyzsz.oss-cn-beijing.aliyuncs.com/seoYaZhongSheZhuang/demo/swiper1.png",
								}];
								let nav1 = [{
									'id': 1,
									'title': '视频',
								}];
								this.demoList = video;
								this.navList = nav1;
							}
							let imgs, photos1, photos2, photos3 = [];
							let nav2, nav3, nav4, nav5 = [];

							if (res.data.imgs.length > 0) {
								this.imgNum = res.data.imgs.length;
								imgs = res.data.imgs.map(item => ({
									title: '楼盘图',
									url: item
								}));
								nav2 = [{
									'id': 2,
									'title': '实景图',
								}];
							}

							if (res.data.photos1) {
								this.photo1Num = res.data.photos1.length;
								photos1 = res.data.photos1.map(item => ({
									title: '楼盘图',
									url: item
								}));
								nav3 = [{
									'id': 3,
									'title': '效果图',
								}];
							}

							if (res.data.photos2) {
								this.photo2Num = res.data.photos2.length;
								photos2 = res.data.photos2.map(item => ({
									title: '楼盘图',
									url: item
								}));
								nav4 = [{
									'id': 4,
									'title': '区位图',
								}];
							}

							if (res.data.photos3) {
								this.photo3Num = res.data.photos3.length;
								photos3 = res.data.photos3.map(item => ({
									title: '楼盘图',
									url: item
								}));
								nav5 = [{
									'id': 5,
									'title': '周边配套',
								}];
							}
							this.demoList = this.demoList.concat(imgs, photos1, photos2, photos3);
							this.navList = this.navList.concat(nav2, nav3, nav4, nav5);
						}
						console.log(this.imgNum);
						console.log(this.photo1Num);
						console.log(this.photo2Num);
						console.log(this.photo3Num);
						this.onImageLoad();
					}
				})
			},
			// 触摸开始
			touchStart(e) {
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},
			// 触摸开始
			touchEnd(e) {
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {} else if (Math.abs(deltaY) > 50 && Math
					.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 0) {
						this.swipeUp = true
					} else {}
				} else {}
			}
		},
	};
</script>

<style lang="scss">
	/* 针对 uView 2.x */
	.u-swiper__indicator {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
	}

	.indicator {
		background: rgba(255, 255, 255, 0.3);
		border-radius: 15px;
		display: flex;
		margin: 0 auto;

		.indicator__dot {
			height: 30px;
			text-align: center;
			line-height: 30px;
			padding: 0 20rpx;
			font-size: 12px
		}

		.indicator__dot--active {
			background: rgba(255, 255, 255, 0.7);
			border-radius: 15px;
		}
	}

	.share-btn {
		background-color: rgb(255, 255, 255);
		border-color: rgb(255, 255, 255);
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 12px;
		width: 33.33vw;
		line-height: 20px;
		padding: 0;
		position: static;

		img {
			width: 48rpx;
			height: 48rpx;
		}
	}

	/* 外层容器控制比例 */
	.swiper-item {
		width: 100%;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持比例并填充容器 */
	}

	.home_list {
		overflow: hidden;
		height: 0;

		&.swipe_up {
			height: auto;
		}

		view.home_list_within {
			box-sizing: border-box;
			width: 100%;
			padding: 0;
			left: 0;
			right: 0;

			.content {
				margin: 0rpx 0 30rpx 0;

				img {
					width: 100%;
				}
			}

			.home_img {
				width: 100%;
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;

				.one_img {
					width: 750rpx;
					height: 470rpx;
				}

				.more {
					font-size: 24rpx;
					width: 100%;
					text-align: center;
					position: absolute;
					bottom: 90rpx;
					color: #c6c6c6;
				}
			}

			.home_title {
				padding: 0 40rpx;
				font-size: 32rpx;
				line-height: 70rpx;
				margin-top: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			.home_text {
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-bottom: 80rpx;

				.house {
					margin-top: 30rpx;

					.h_imgs {
						width: 48%;
						margin: 10rpx 10rpx 0rpx 0;

						image {
							width: 100%;
							height: 120px;
							border-radius: 10rpx;
						}
					}
				}

				.maps {
					font-size: 28rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #333333;
				}

				.list {
					display: flex;
					flex-direction: column;

					.li {
						display: flex;
						flex-direction: row;
						height: 60rpx;
						line-height: 60px;
						align-items: center;

						.title {
							width: 22%;
							font-size: 28rpx;
							color: #222222;
						}

						.desc {
							width: 70%;
							font-size: 28rpx;
							color: #222222;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}


				.price {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 12px 0 12px 0;

					.pp1 {
						display: flex;
						flex-direction: column;
						
						.p1 {
							font-size: 36rpx;
							color: #f05b21;
							font-weight: bold;
							line-height: 60rpx;
						}

						.p2 {
							font-size: 24rpx;
							color: #888888;
						}
					}
				}

				.tags {
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					span {
						padding: 0 10rpx;
						margin-right: 10px;
						margin-top: 10px;
						font-size: 12px;
						height: 27px;
						line-height: 27px;
						background-color: #fff1dc;
						color: #8c6239;
						border-radius: 5px;
					}
				}

				h2 {
					font-size: 32rpx;
					line-height: 100rpx;
					font-weight: bold;
					border-bottom: 1px solid #616161;
					color: #333333;
				}

				p {
					margin-top: 24rpx;
					line-height: 36rpx;
					font-size: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					b {
						color: #f05b21;
						font-size: 36rpx;
						width: 80%;
						font-weight: bold;
					}
				}

				p:nth-child(2) span {
					font-size: 28rpx;
				}

				p:nth-child(3) {
					font-size: 28rpx;
					justify-content: flex-start;
				}

				p:nth-child(4) {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 10rpx 0 30rpx;

					span {
						width: 48%;
						text-align: center;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: baseline;
					}

					span:first-child {
						border-right: 2rpx solid #ccc;
					}

					b {
						color: #000;
						width: auto;
						font-weight: bold;
					}
				}
			}

			.icon {
				height: 40rpx;
				float: right;
			}

			:last-child {
				border-bottom: none;
			}
		}
	}

	.public_title {
		line-height: 80rpx;
		font-size: 36rpx;
		padding: 0 40rpx;
		font-weight: bold;

		.release {
			float: right;
			color: #999;
			font-size: 28rpx;
			font-weight: normal;
		}
	}

	.det_1 {
		padding: 0 40rpx;
		margin-bottom: 20rpx;

		.two_img {
			width: 100%;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		p {
			font-size: 28rpx;
			line-height: 28rpx;
		}
	}

	.det_2 {
		padding: 0 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.two_img {
			width: 216rpx;
			height: 216rpx;
		}

		view {
			width: 66%;
		}

		h2 {
			iine-height: 100rpx;
			font-size: 32rpx;
			margin-bottom: 20rpx;
			width: 100%;
			font-weight: bold;
		}

		p {
			font-size: 24rpx;
			line-height: 42rpx;
			width: 100%;
		}
	}

	.abroad {
		background: #f2f2f2;
		margin-top: 40rpx;
		padding: 0 40rpx 160rpx;
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;

		.public_title {
			padding: 0;
		}

		.select_list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 24rpx;

			.icon_1 {
				display: inline-block;
				margin-top: 8rpx;
				margin-left: 12rpx;
			}

			view {
				width: 25%;
				text-align: center;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
			}
		}

		.one {
			width: 100%;
			margin: 40rpx 0;
			border-radius: 32rpx;
			box-shadow: -1px 0 12px rgba(0, 0, 0, 0.2), 1px 0 12px rgba(0, 0, 0, 0.2),
				0 -1px 12px rgba(0, 0, 0, 0.2), 0 1px 12px rgba(0, 0, 0, 0.2);
		}
	}

	.last_footer {
		position: fixed;
		width: calc(100vw - 80rpx);
		/* 使用env()作为现代浏览器首选，constant()作为备选 
		bottom: env(safe-area-inset-bottom);*/
		bottom: 0;
		min-height: 80rpx;
		background: #fff;
		padding: 20rpx 40rpx;
		box-shadow: 2px 2px 5px #888888;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		z-index: 999;
		/* 防止被其他元素覆盖 */



		text {
			display: block;
			font-size: 24rpx;
		}

	}

	.thumb-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1000;
		overflow: hidden;

		&.swipe_up {
			animation: fadeOut 1s forwards;
		}

		.thumb {
			width: 100%;
			height: 100%;
			animation: fadeIn 2.9s forwards;
		}

		.thumb_tips {
			position: absolute;
			top: 100rpx;
			right: 40rpx;
			writing-mode: vertical-rl;
			text-orientation: upright;
			color: #fff;
			font-weight: 300;
			letter-spacing: 14rpx;
		}

		.thumb_info {
			position: absolute;
			left: 30rpx;
			bottom: 40rpx;
			color: #fff;

			h2 {
				font-size: 48rpx;
			}

			.p1 {
				color: orangered;
				font-size: 34rpx;
			}

			.tags {
				display: flex;
				margin: 12rpx 0;

				.red_tag {
					font-size: 18rpx;
					background: #93281b;
					padding: 4rpx 22rpx;
				}

				>span {
					font-size: 18rpx;
					margin: 0 8rpx;
					padding: 4rpx 6rpx;
					border: 1px solid #fff;
					border-radius: 8rpx;
				}
			}

			.desc {}
		}
	}

	@keyframes fadeIn {
		0% {
			transform: scale(1);
		}

		100% {
			transform: scale(1.2);
		}
	}

	@keyframes fadeOut {
		0% {
			opacity: 1;
			transform: translateY(0);
		}

		100% {
			opacity: 0;
			transform: translateY(-100%);
		}
	}
</style>